<template>
  <div>
    <el-container>
      <el-main>
        <permissionsadd ref="addchild" @callAdd="reload" />
        <permissionsedit ref="editchild" @callEdit="reload" />
        <el-button
          size="mini"
          type="primary"
          @click="onaddshow"
        >新增</el-button>
        <el-table
          :data="datasource"
          style="width: 100%; font-size: 10px"
          max-height="450"
          row-key="id"
          default-expand-all
          :tree-props="{ children: 'children', haschildren: 'haschildren' }"
        >
          <el-table-column
            :show-overflow-tooltip="true"
            prop="permissionscode"
            label="权限编码"
            sortable
            width="auto"
          />
          <el-table-column
            prop="permissionsname"
            label="权限名"
            sortable
            width="auto"
          />
          <el-table-column
            :show-overflow-tooltip="true"
            prop="description"
            label="描述"
            sortable
            width="auto"
          />
          <el-table-column prop="sort" label="序号" sortable width="auto" />

          <el-table-column prop="icon" label="Icon" sortable width="auto">
            <template slot-scope="scope">
              <i :class="scope.row.icon" />
            </template>
          </el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="component"
            label="组件路径"
            sortable
            width="auto"
          />
          <el-table-column prop="alwaysshow" label="显示" sortable width="auto" />
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                style="margin-right: 10px"
                @click="oneditshow(scope.row)"
              >
                编辑
              </el-button>
              <el-popconfirm
                title="Are you sure to delete?"
                style="margin-right: 10px"
                @onConfirm="confirm(scope.row)"
              >
                <el-button slot="reference" type="text" size="small">
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getTreepermissions, deletepermissions } from '@/api/permissions'
import permissionsadd from './tablecomponents/permissionsadd.vue'
import permissionsedit from './tablecomponents/permissionsedit.vue'
export default {
  name: 'Permissionstable',
  components: { permissionsadd, permissionsedit },
  data() {
    return {
      datasource: []
    }
  },
  async created() {
    this.getTreepermissions()
  },
  methods: {
    async confirm(rows) {
      var res = await deletepermissions(rows)
      if (res.code === 200) {
        this.$message({
          message: 'Success',
          type: 'success'
        })

        await this.getTreepermissions()
      }
    },
    async getTreepermissions() {
      var { data } = await getTreepermissions()
      this.datasource = data
    },
    onaddshow() {
      this.$refs.addchild.onshow(this.datasource)
    },
    oneditshow(obj) {
      this.$refs.editchild.onshow(obj, this.datasource)
    },
    async reload() {
      await this.getTreepermissions()
    }
  }
}
</script>
<style  scoped>
</style>
